<template>
  <div class="dashboard-container">
    <div class="dashboard-text">用户名:{{ name }}</div>
    <div class="dashboard-text">用户角色:<span v-for="role in roles" :key="role">{{ role }}</span></div>
    <div >
      <div >
        <ve-line :data="lineData" :width="width" :height="height"></ve-line>
      </div>
      <ve-map :data="mapData" ></ve-map>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  data() {
    return {
      width: '500px',
      height: '400px',
      lineData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '星期一', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '星期二', '访问用户': 1593, '下单用户': 1593, '下单率': 0.62 },
          { '日期': '星期三', '访问用户': 2393, '下单用户': 1193, '下单率': 0.22 },
          { '日期': '星期四', '访问用户': 4293, '下单用户': 2393, '下单率': 0.56 },
          { '日期': '星期五', '访问用户': 2593, '下单用户': 5793, '下单率': 0.43 }
        ]
      },
      mapData: {
        columns: ['位置', '税收', '人口', '面积'],
        rows: [
          { '位置': '吉林', '税收': 123, '人口': 123, '面积': 92134 },
          { '位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234 },
          { '位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234 },
          { '位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234 }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 14px;
    line-height: 15px;
    margin-left: 10px;
    float: right;
  }
}
</style>
